<template>
  <div class="Question">
    <audio v-show="false" ref="wrongMp3" controls>
      <source src="../assets/wrong.mp3" type="audio/mpeg">
    </audio>
    <audio v-show="false" ref="rightMp3" controls>
      <source src="../assets/right.mp3" type="audio/mpeg">
    </audio>
    <div class="back">
      <button class="back_icon" @click="deleteWebView"></button>
    </div>
    <div class="beforStart" v-show="beforStart">
      <img src="../assets/bg_beforStart.jpg" alt="">
      <!-- <button @click="start" class="btn_beforStart"></button> -->
      <img v-show="showCount===3" class="count_down" src="../assets/count_down_1.png" alt="">
      <img v-show="showCount===2" class="count_down" src="../assets/count_down_2.png" alt="">
      <img v-show="showCount===1" class="count_down" src="../assets/count_down_3.png" alt="">
    </div>
    <img src="../assets/bg_question_top.jpg" alt="">
    <div class="lastTime">
      <button class="lastTime_btn">
        <span class="lastText">倒计时：</span>
        <span class="timeText" ref="timeText">{{Time}}</span>s
      </button>
      <button class="wrongNumBox">
        错题: {{wrongNum}}/20
      </button>
    </div>
    <div style="padding-top:0.1rem">
      <p style="text-align:center;font-size:0.2rem;color: #aa8a8a;">Tips:答错超过20道结束本次答题</p>
    </div>
    <!-- <button @click="start" v-show="!startAnswer">开始</button> -->
    <div class="questionContent" v-if="beforStart === false">
      <img class="bg_question_center" src="../assets/bg_question_center.jpg" alt="">
      <div class="currentQuestionNum">
        <div style="height:0.05rem;"></div>
        <p>第{{questionNum}}题</p>
      </div>
      <div v-if="currentQuestion.question !== ''" class="question_detail">
        {{currentQuestion.question}}
      </div>
      <div class="answer_box" v-if="currentQuestion.question !== ''">
        <transition v-for="(item,index) in currentQuestion.answer" :key="index" enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
          <button v-if="showAllAnswer" @click="getNextQuestion(item, currentQuestion.correctAnswer, currentQuestion.question, $event)" :class="showAllAnswer ? 'answerBtn' : 'answerBtnSelect'">{{item}}</button>
        </transition>
      </div>
    </div>
    <div class="afterQuestion" v-show="showResult">
      <div class="afterQuestionContent">
        <div class="afterQuestionTopBg">
          <p>
            {{resultTxt}}
          </p>
          <div class="btnX">
            <img src="../assets/btn_X.png" alt="" @click="btnX">
          </div>
        </div>
        <div class="answerDetail">
          <p>本轮答对了{{correctNumThis}}道题</p>
          <p style="padding-top:0.1rem;" v-if="todayRank !== ''">今日{{todayRank === 0 ? '未上榜' : '排名第' + todayRank}}</p>
          <span>{{afterAnswerText}}</span>
          <router-link :to="{name: 'AnswerRecord'}" class="back">
            <button class="checkMyAnswer">查看答题记录</button>
          </router-link>
        </div>
        <div class="afterQuestion_btn_wrap">
          <button class="todayLess">今日剩余{{baseInfo.answerTimes}}次</button>
          <button class="btn_oneMoreTime" @click="oneMoreTime"></button>
          <button class="btn_showoff" @click="showoffFN"></button>
          <!-- <img src="../assets/btn_oneMoreTime.png" alt="">
          <img src="../assets/btn_showoff.png" alt=""> -->
        </div>
      </div>
        <!-- <img class="afterQuestionAlert" src="../assets/sure_alert.png" alt=""> -->
    </div>
    <div class="showoff" v-if="showoff">
      <div class="showoffContent">
        <div class="showoffBgWrap">
          <div class="btnX">
            <img src="../assets/btn_X.png" alt="" @click="btnX2">
          </div>
          <div class="bg_showoff_top">
            <p>分享得次数</p>
          </div>
          <div class="bg_showoff_bottom">
            <div style="height:0.6rem;"></div>
            <p style="color:#7a585c;font-size: 0.25rem;width:80%;">
              <ul>
                <li>1.每日首次分享可增加当日答题次数 2 次</li>
                <li>2.每邀请一位非Etalk学员参加活动,可增加 1 次基础挑战机会</li>
              </ul>
            </p>
            <div class="shareBtnWrap">
              <button v-if="isWechat===false" class="btn_shareFrineds" @click="getQart(0)"></button>
              <button v-if="isWechat===false" class="btn_shareFrinedsCircle" @click="getQart(1)"></button>
            </div>
            <span style="text-indent: 0.2rem;display: block;color:#7A585C;">已成功邀请好友:</span>
            <div class="myFriendsList">
              <div class="myFrinendsWrap">
                <ul>
                  <li v-for="(item, index) of myFriendList" :key="index">
                    <div class="listItem">
                      <myFriendsItem :player="item" :index="index"></myFriendsItem>
                    </div>
                  </li>
                  <li v-if="myFriendList.length===0" v-for="item in 3" :key="item">
                    <div class="unyaoqing">
                      <div class="unyaoqingAvatarItem"></div>
                      <span>待邀请</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div v-show="showDom" id="qrcode" ref="qrimg" ></div>
      <!-- <canvas v-show="showDom" ref="finalyc" width="750" height="1334"></canvas> -->
      <canvas v-show="showDom" ref="finalyc" width="375" height="667"></canvas>
      <!-- <img class="afterQuestionShowoff" src="../assets/sure_alert.png" alt=""> -->
    </div>
    <div class="backAlert" v-show="true">
      <div class="backAlertContent">
        <div class="backAlertTopBg">
          <div class="btnX">
            <img src="../assets/btn_X.png" alt="" @click="btnX">
          </div>
        </div>
        <div class="backAlertDetail">
        </div>
        <div class="backAlert_btn_wrap">
        </div>
      </div>
    </div>
    <div class="weChatBg" v-if="weChatShowOff" @click="weChatShowOff=false">
      <img v-if="baseInfo.isShare === 1" src="../assets/weChatBg.png" alt="">
      <img v-else-if="baseInfo.isShare === 0" src="../assets/weChatFirstShare.png" alt="">
    </div>
    <div class="afterQuestion" v-show="endBeforAnswer">
      <div class="afterQuestionContent">
        <div class="afterQuestionTopBg">
          <p>
            这样真的好吗?
          </p>
          <div class="btnX">
            <img src="../assets/btn_X.png" alt="" @click="btnX">
          </div>
        </div>
        <div class="answerDetail">
          <p>确定结束本次答题吗?</p>
          <div class="endBtnWrap">
            <button class="giveUp" @click="giveUp">
              我放弃了
            </button>
            <button class="continue" @click="continue1">
              继续答题
            </button>
          </div>
        </div>
      </div>
        <!-- <img class="afterQuestionAlert" src="../assets/sure_alert.png" alt=""> -->
    </div>
    <div class="TIMEOVER" v-if="TIMEOVER">
      <p>Mission<br>Complete!</p>
    </div>
  </div>
</template>

<script>
import {wxshare} from '../util/WXShare'
import {mapGetters} from 'vuex'
import {Toast} from 'mint-ui'
import {getQuestion, getIds, getUserInfo, lessChance, getMyFriends, updateCorrectNum, checkMyselfRnak, checkIfShare, addTimesByShare} from '../request/question'
import GetToken from '../util/getToken'
import CircleSvg from '../components/CircleSvg'
import myFriendsItem from '../components/myFriendsItem'
import AppBradge from '../util/appBradge'
import QRCode from 'qrcodejs2'
export default {
  name: 'Question',
  data () {
    return {
      show: true,
      Time: 60,
      Num: 1,
      idarr: '',
      questionArr: [],
      correctNum: 0,
      page: 0,
      num: 20,
      questionNum: 1,
      currentQuestion: {question: '', answer: [], correctAnswer: ''},
      myAnswer: [],
      showTimeUp: false,
      // startAnswer: false,
      beforStart: true,
      answerClass: 'answerBtn',
      chooseAnswer: '',
      showAllAnswer: true,
      canClick: true,
      showResult: false,
      showoff: false,
      myFriendList: [],
      showDom: false,
      imgBase64: '',
      showCount: 1,
      isWechat: false,
      wrongNum: 0,
      resultTxt: 'TIMES UP~',
      afterAnswerText: '继续努力~差点就更新记录了',
      weChatShowOff: false,
      endBeforAnswer: false,
      TIMEOVER: false,
      todayRank: ''
    }
  },
  beforeRouteLeave (to, from, next) {
    for (let i = 0; i < 9999; i++) {
      clearInterval(i)
    }
    next()
  },
  components: {
    CircleSvg,
    myFriendsItem
  },
  computed: {
    ...mapGetters([
      'token',
      'baseInfo',
      'correctNumThis',
      'startAnswer',
      'initRankList',
      'myAnswers'
    ])
  },
  created () {
    if (!this.token) {
      this.$router.push({name: 'SignUp', query: {fresh: 'yes'}})
    }
    if (this.initRankList === 0) {
      this.$router.push({name: 'RankList'})
    }
    if (this.$debugToken) {
      this.$store.dispatch('getToken', this.$debugToken)
      this.getIdAndQuestion()
    } else if (this.token) {
      if (this.$route.query.showResult === 'yes') {
        this.showResult = true
      } else {
        this.getIdAndQuestion()
      }
    } else {
      if (this.$route.query.showResult === 'yes') {
        this.showResult = true
      } else {
        GetToken.getToken(this).then((data) => {
          this.$store.dispatch('getToken', data.tokenString)
          getUserInfo({tokenString: this.token}).then((data) => {
            this.$store.dispatch('saveInfo', data)
            this.getIdAndQuestion()
          })
        })
      }
    }
  },
  mounted () {
    if (this.$route.query.showResult === 'yes') {
      this.showResult = true
    } else {
      setTimeout(() => {
        this.showCount++
      }, 1000)
      setTimeout(() => {
        this.showCount++
      }, 2000)
      setTimeout(() => {
        this.showCount++
        this.start()
      }, 3000)
    }
    let clientHeight = document.body.clientHeight
    let screenHeight = window.screen.height
    if (clientHeight < screenHeight) {
      this.isWechat = true
    }
    wxshare('超级词场', '限时一分钟,你会比我强?', 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + this.token + '&source=97', 'https://hnres.etalk365.com/app/image/activity_pic/suoluetu.jpg', this.successShare)
  },
  methods: {
    successShare () {
      checkIfShare({tokenString: this.token}).then(data => {
        if (data.isShare === 0) {
          addTimesByShare({tokenString: this.token}).then(data => {
            if (data > 0) {
              getUserInfo({ tokenString: this.token }).then(data => {
                this.$store.dispatch('saveInfo', data)
              })
            }
          })
        }
      })
    },
    giveUp () {
      this.$router.push({name: 'RankList'})
    },
    continue1 () {
      this.endBeforAnswer = false
    },
    btnX () {
      this.$router.push({name: 'RankList'})
    },
    btnX2 () {
      this.showResult = true
      this.showoff = false
    },
    deleteWebView () {
      // this.$router.push({name: 'RankList'})
      this.endBeforAnswer = true
    },
    showoffFN () {
      if (!this.isWechat) {
        this.showoff = true
        this.showResult = false
        this.myFriendList = []
        getMyFriends({tokenString: this.token}).then(data => {
          if (Number(data) === 0) {
            this.showoff = true
          } else if (data.recommendedInformation.length > 0) {
            data.recommendedInformation.map((item1, index) => {
              data.recommendedUser.map((item2, index) => {
                if (item1.uid === item2.personId) {
                  this.myFriendList.push(Object.assign(item1, item2))
                }
              })
            })
          }
        })
      } else {
        this.weChatShowOff = true
      }
    },
    start () {
      // this.startAnswer = true
      this.beforStart = false
      this.$store.dispatch('changeinitRankList', 0)
      setInterval(() => {
        this.Time--
        if (this.Time <= 0) {
          for (let i = 0; i < 9999; i++) {
            clearInterval(i)
          }
          this.TIMEOVER = true
          setTimeout(() => {
            this.TIMEOVER = false
            this.showResult = true
          }, 1500)
          this.$refs.timeText.style.transform = 'scale(1)'
          this.$store.dispatch('changeStartAnswer', false)
          this.correctNum = 0
          this.myAnswer.map((item) => {
            if (item.myAnswer === item.correctAnswer) {
              this.correctNum++
            }
          })
          this.$store.dispatch('saveAnswers', this.myAnswer)
          this.$store.dispatch('changeQuestionNum', this.correctNum)
          updateCorrectNum({tokenString: this.token, correctNumber: this.correctNumThis}).then(data => {
            if (Number(data) === 1) {
              this.afterAnswerText = '666,刷新今日最高答题数了'
            } else if (Number(data) === 2) {
              this.afterAnswerText = '6翻了,刷新历史最高答题数了'
            }
            checkMyselfRnak({tokenString: this.token, type: 0}).then(data => {
              this.todayRank = data.rankNumber
            })
          })
          this.showTimeUp = true
          // this.showResult = true
        }
        if (this.Time <= 10) {
          this.$refs.timeText.style.transform = 'scale(1.8)'
          setTimeout(() => {
            this.$refs.timeText.style.transform = 'scale(1)'
          }, 250)
        }
      }, 1000)
    },
    getNextQuestion (answer, correctAnswer, question, e) {
      if (!this.canClick) { return }
      this.canClick = false
      this.chooseAnswer = answer
      this.show = !this.show
      this.showAllAnswer = false
      let curent = e.currentTarget
      // if (answer === correctAnswer) {
      //   this.correctNum++
      // }
      this.myAnswer.push({
        myAnswer: answer,
        correctAnswer,
        question
      })
      if (answer !== correctAnswer) {
        // this.$refs.wrongMp3.pause()
        // this.$refs.rightMp3.pause()
        this.$refs.wrongMp3.currentTime = 0
        this.$refs.wrongMp3.play()
        this.wrongNum++
        curent.className = 'answerBtnSelect'
        if (this.wrongNum > 20) {
          this.resultTxt = '错太多啦,认真做哦~'
          for (let i = 0; i < 9999; i++) {
            clearInterval(i)
          }
          this.TIMEOVER = true
          setTimeout(() => {
            this.TIMEOVER = false
            this.showResult = true
          }, 1500)
          this.$store.dispatch('changeStartAnswer', false)
          this.correctNum = 0
          this.myAnswer.map((item) => {
            if (item.myAnswer === item.correctAnswer) {
              this.correctNum++
            }
          })
          this.$store.dispatch('saveAnswers', this.myAnswer)
          this.$store.dispatch('changeQuestionNum', this.correctNum)
          updateCorrectNum({tokenString: this.token, correctNumber: this.correctNumThis}).then(data => {
            if (Number(data) === 1) {
              this.afterAnswerText = '666,刷新今日最高答题数了'
            } else if (Number(data) === 2) {
              this.afterAnswerText = '6翻了,刷新历史最高答题数了'
            }
            checkMyselfRnak({tokenString: this.token, type: 0}).then(data => {
              this.todayRank = data.rankNumber
            })
          })
          // this.showResult = true
          return
        }
      } else {
        // this.$refs.wrongMp3.pause()
        // this.$refs.rightMp3.pause()
        this.$refs.rightMp3.currentTime = 0
        this.$refs.rightMp3.play()
        curent.className = 'answerBtnSelectRight'
      }
      if (this.questionNum >= this.questionArr.length) {
        this.resultTxt = '天呐,题目都答完了'
        for (let i = 0; i < 9999; i++) {
          this.$refs.timeText.style.transform = 'scale(1)'
          clearInterval(i)
        }
        this.TIMEOVER = true
        setTimeout(() => {
          this.TIMEOVER = false
          this.showResult = true
        }, 1500)
        this.$store.dispatch('changeStartAnswer', false)
        this.correctNum = 0
        this.myAnswer.map((item) => {
          if (item.myAnswer === item.correctAnswer) {
            this.correctNum++
          }
        })
        this.$store.dispatch('saveAnswers', this.myAnswer)
        this.$store.dispatch('changeQuestionNum', this.correctNum)
        updateCorrectNum({tokenString: this.token, correctNumber: this.correctNumThis}).then(data => {
          if (Number(data) === 1) {
            this.afterAnswerText = '666,刷新今日最高答题数了'
          } else if (Number(data) === 2) {
            this.afterAnswerText = '6翻了,刷新历史最高答题数了'
          }
          checkMyselfRnak({tokenString: this.token, type: 0}).then(data => {
            this.todayRank = data.rankNumber
          })
        })
        // this.showResult = true
        return
      }
      setTimeout(() => {
        this.questionNum++
        // this.currentQuestion = this.questionArr[this.questionNum - 1]
        this.currentQuestion.question = this.questionArr[this.questionNum - 1].question
        this.currentQuestion.correctAnswer = this.questionArr[this.questionNum - 1].correctAnswer
        this.currentQuestion.answer = []
        this.currentQuestion.answer.push(this.questionArr[this.questionNum - 1].answerA)
        this.currentQuestion.answer.push(this.questionArr[this.questionNum - 1].answerB)
        this.currentQuestion.answer.push(this.questionArr[this.questionNum - 1].answerC)
        this.currentQuestion.answer.sort(() => {
          return Math.random() > 0.5 ? 1 : -1
        })
        this.showAllAnswer = true
        this.canClick = true
        if (this.questionNum - 1 > this.num * this.page - 10) {
          let arr = this.idarr.slice(this.num * this.page, this.num * this.page + this.num)
          getQuestion({tokenString: this.token, idArray: arr.join()}).then((data) => {
            this.questionArr = [...this.questionArr, ...data]
            this.page++
          })
        }
      }, 300)
    },
    oneMoreTime () {
      if (this.baseInfo.answerTimes > 0) {
        lessChance({tokenString: this.token}).then((data) => {
          this.$store.dispatch('updateChance')
          // this.$store.dispatch('changeinitRankList', 1)
          this.getIdAndQuestion()
          this.showCount = 1
          setTimeout(() => {
            this.showCount++
          }, 1000)
          setTimeout(() => {
            this.showCount++
          }, 2000)
          setTimeout(() => {
            this.showCount++
            this.start()
          }, 3000)
        })
      } else {
        if (!this.isWechat) {
          this.showoffFN()
        } else {
          // this.weChatShowOff = true
          Toast({
            message: '次数已用完,登陆Etalk APP邀请得次数',
            duration: 2000
          })
        }
      }
    },
    getIdAndQuestion () {
      this.page = 0
      this.num = 20
      this.Time = 60
      this.canClick = true
      this.showoff = false
      // this.startAnswer = false
      this.beforStart = true
      this.questionNum = 1
      this.idarr = ''
      this.questionArr = []
      this.correctNum = 0
      this.currentQuestion = {question: '', answer: [], correctAnswer: ''}
      this.myAnswer = []
      this.showAllAnswer = true
      this.showResult = false
      this.wrongNum = 0
      getIds({tokenString: this.token, team: this.baseInfo.team}).then((data) => {
        this.idarr = data
        return 1
      }).then((data) => {
        let arr = this.idarr.slice(this.num * this.page, this.num * this.page + this.num)
        getQuestion({tokenString: this.token, idArray: arr.join()}).then((data) => {
          this.questionArr = [...this.questionArr, ...data]
          this.page++
          this.currentQuestion.question = this.questionArr[0].question
          this.currentQuestion.correctAnswer = this.questionArr[0].correctAnswer
          this.currentQuestion.answer.push(this.questionArr[0].answerA)
          this.currentQuestion.answer.push(this.questionArr[0].answerB)
          this.currentQuestion.answer.push(this.questionArr[0].answerC)
          this.currentQuestion.answer.sort(() => {
            return Math.random() > 0.5 ? 1 : -1
          })
        })
      })
    },
    getQart (shareType) {
      /**
        auther: cmyh
        创建二维码
        之所以生成的二维码密度大，有俩点原因：
        内容过多。
        选择了高比例的错误修正。
        容错级别，可设置为：
        QRCode.CorrectLevel.L
        QRCode.CorrectLevel.M
        QRCode.CorrectLevel.Q
        QRCode.CorrectLevel.H
      **/
      if (shareType === 0) {
        this.$store.dispatch('zhugeWxshareFriendsAnswer', {})
      } else {
        this.$store.dispatch('zhugeWxshareFriendsQuanAnswer', {})
      }
      if (this.$data.imgBase64 !== '') {
        this.shareMethod(shareType)
      } else {
        let qrcode = new QRCode(document.getElementById('qrcode'), {
          width: 100, // 设置宽高
          height: 100,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.M
        })
        let shareUrl = 'https://metalk.etalk365.com/superwordfile/#/signup?t=' + this.token + '&source=97'
        qrcode.makeCode(shareUrl)
        let qrimg = this.$refs.qrimg.children[1]
        let bg = new Image()
        bg.src = require('../assets/showoffBg.jpg') // 'https://hnres.etalk365.com/app/image/activity_pic/invitation.jpg'
        let codePromise = new Promise((resolve, reject) => {
          qrimg.onload = () => {
            // this.composeQr(qrimg)
            resolve(1)
          }
          qrimg.onerror = () => {
            resolve(0)
          }
        })
        let bgPromise = new Promise((resolve, reject) => {
          bg.onload = () => {
            resolve(1)
          }
          bg.onerror = () => {
            resolve(0)
          }
        })
        Promise.all([codePromise, bgPromise]).then(data => {
          if (Number(data[0]) === 1) {
            this.composeQr(qrimg, bg, shareType)
          } else {
            this.composeQr(qrimg, bg, shareType)
          }
        })
      }
      // this.imgPreloadingAct()
    },
    composeQr (img, bg, shareType) {
      // 合成最终专属二维码图片
      try {
        let c = this.$refs.finalyc
        let ctx = c.getContext('2d')
        // let imgbg = this.$refs.qrbg
        ctx.drawImage(bg, 0, 0)
        ctx.fillStyle = '#fff'
        // ctx.fillRect(255, 1044, 240, 240)
        ctx.drawImage(img, 247, 532)
        ctx.save()
        ctx.font = 'normal normal bold 18px Microsoft Yahei' // '36px Microsoft Yahei'
        ctx.fillStyle = 'white'
        ctx.fillText('我在Etalk英语 "超级词场" 活动中', 23, 100)
        ctx.font = 'normal normal bold 30px Microsoft Yahei'
        // ctx.font = '60px Microsoft Yahei'
        ctx.fillStyle = 'white'
        ctx.fillText('本轮得分 ' + this.correctNumThis, 23, 140)
        checkMyselfRnak({tokenString: this.token, type: 0}).then(data => {
          if (Number(data.rankNumber) !== 0) {
            ctx.fillText('今日排名第 ' + data.rankNumber, 23, 182)
            this.$data.imgBase64 = c.toDataURL('image/jpeg')
            this.shareMethod(shareType)
          } else {
            ctx.fillText('今日未上榜 ', 23, 147)
            this.$data.imgBase64 = c.toDataURL('image/jpeg')
            this.shareMethod(shareType)
          }
        })
      } catch (e) {
        console.log(e)
      }
    },
    shareMethod (shareType) {
      AppBradge.wxshare(shareType, this.$data.imgBase64).then((type) => {
        let msg = ''
        switch (type * 1) {
          case 0:
            msg = '分享成功'
            break
          case -1:
            msg = '发送失败'
            break
          case -2:
            msg = '您取消了'
            break
          case -3:
            msg = '发送失败'
            break
          case -4:
            msg = '授权失败'
            break
          case -5:
            msg = '微信不支持'
            break
        }
        if (type * 1 === 0) {
          checkIfShare({tokenString: this.token}).then(data => {
            if (data.isShare === 0) {
              addTimesByShare({tokenString: this.token}).then(data => {
                if (data > 0) {
                  msg = '分享成功,当日增加两次答题机会'
                  getUserInfo({ tokenString: this.token }).then(data => {
                    this.$store.dispatch('saveInfo', data)
                    this.noAnswerTimes = false
                    Toast({
                      message: msg,
                      duration: 1500
                    })
                  })
                }
              })
            } else {
              Toast({
                message: msg,
                duration: 1500
              })
            }
          })
        } else {
          Toast({
            message: msg,
            duration: 1500
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../scss/question';
.border_box{
  display: flex;
  justify-content: center;
  line-height: 30px;
  text-align: center;
}
.border{
  width: 100px;
  height: 30px;
  border: 1px solid red;
  background: red;
  border-radius:0.3rem 0 0 0.3rem;
  box-shadow: 0 0.1rem 0 #888888;
}
.border2{
  width: 100px;
  height: 30px;
  border: 1px solid red;
  background-color: rgba(0,0,0,0);
  border-radius:0 0.3rem 0.3rem 0;
  box-shadow: 0 0.1rem 0 #fff;
}
.weChatBg{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index:9999;
  img{
    width:90%;
    display: block;
    margin: 0 auto;
  }
}
.myFriendsList{
  // margin-top: 0.1rem;
  height: 2.8rem;
  overflow: scroll;
  background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  width: 80%;
  border-radius: 0.3rem;
  margin: 0px auto;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  span{
    display: block;
    text-indent: 0.2rem;
  }
}
.showoff{
  .listItem{
    margin-top: 0.1rem;
    background: white;
    margin-left: 3%;
    // margin-right: 0.23rem;
    // height: 0.9rem;
    // line-height: 0.35rem;
    border-radius: 0.45rem;
    width: 94%;
    height: 100%;
    .correctNumRnak{
      margin-left: 0.2rem;
    }
  }
}
.unyaoqing{
  background: white;
  height: 0.8rem;
  width: 90%;
  margin: 0 auto;
  margin-top: 0.1rem;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  .unyaoqingAvatarItem{
    width: 0.7rem;
    height: 0.7rem;
    // border:1px solid red;
    border-radius: 100%;
    margin-left: 0.5rem;
    margin-top: 0.05rem;
    background: -webkit-linear-gradient(left, #ffebd6, #ffd8e7);
  }
  span{
    font-size: 0.25rem;
    color: rgb(170, 138, 138);
  }
}
// .myFrinendsWrap{
//   li{
//     height:0.85rem;
//   }
// }
.back_icon{
  z-index:0;
}
.TIMEOVER{
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.7);
  top: 0;
  left: 0;
  z-index: 99999;
  p{
    font-size: 0.6rem;
    font-weight: bold;
    font-style: italic;
    color: rgba(243, 222, 222, 1);
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    text-align: center;
    width: 100%;
  }
}
.myFrinendsWrap li {
  height: 0.85rem;
}
.myFriendsItem{
  height: 100%;
}
</style>
